import React, { Component } from 'react'
import { Switch, Route, Redirect } from 'react-router'
const Index = React.lazy(()=>import('../component/Index'))
const Redux = React.lazy(()=>import('../component/Redux'))
const Redux2 = React.lazy(()=>import('../component/Redux2'))
const Login = React.lazy(()=>import('../component/Login'))
const Cart = React.lazy(()=>import('../component/Cart'))

export default class Router extends Component {
  render() {
    return (
      <React.Suspense fallback={<mark>loading...</mark>}>
        <Switch>
          <Route path="/" exact component={Index}></Route>
          {/* <Route path="/login" exact component={Login}></Route> */}
          {/* <Route path="/cart" exact component={Cart}></Route> */}
          <Route path="/login" exact render={()=>{
            document.title="登录";
            return <Login />
          }}></Route>
          <Route path="/cart" exact render={()=>{
            // 登陆后才能查看
            if(localStorage.getItem('isLogin')) {
              return <Cart></Cart>
            }else {
              return <Redirect to="/login"></Redirect>
            }
          }}></Route>
          <Route path="/redux" exact component={Redux}></Route>
          <Route path="/redux2" exact component={Redux2}></Route>
        </Switch>
      </React.Suspense>
    )
  }
}
